<template>
	<view>
		<view class="">
			<swiper :indicator-dots="true" style="height: 140px;" indicator-active-color="rgba(200,200,200,0.5)" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-item">
						<image class="banner" :src="item.img" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="banner2" @tap="switchToConsult">
			<image src="../../static/image/banner2.png" mode="widthFix"></image>
		</view>
		<view class="floor1">
			<view class="top">
				<image src="../../static/image/zan.png" mode=""></image>
				<view class="">
					按专长找律师
				</view>
				<view class="text">
					<view class="">
						MORE
					</view>
					<view class="right">
						>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="sub-box" @tap="jumpLookLower">
					<image src="../../static/image/icon/借贷纠纷.png" mode=""></image>
					<view class="">
						借贷纠纷
					</view>
				</view>
				<view class="sub-box" @tap="jumpLookLower">
					<image src="../../static/image/icon/房产纠纷.png" mode=""></image>
					<view class="">
						房产纠纷
					</view>
				</view>
				<view class="sub-box" @tap="jumpLookLower">
					<image src="../../static/image/icon/婚姻破裂.png" mode=""></image>
					<view class="">
						婚姻家事
					</view>
				</view>
				<view class="sub-box" @tap="jumpLookLower">
					<image src="../../static/image/icon/合同纠纷.png" mode=""></image>
					<view class="">
						合同纠纷
					</view>
				</view>
				<view class="sub-box" @tap="jumpLookLower">
					<image src="../../static/image/icon/劳动纠纷.png" mode=""></image>
					<view class="">
						劳动纠纷
					</view>
				</view>
				<view class="sub-box" @tap="jumpLookLower">
					<image src="../../static/image/icon/交通纠纷.png" mode=""></image>
					<view class="">
						交通事故
					</view>
				</view>
				<view class="sub-box" @tap="jumpLookLower">
					<image src="../../static/image/icon/刑事案件.png" mode=""></image>
					<view class="">
						刑事案件
					</view>
				</view>
				<view class="sub-box" @tap="jumpLookLower">
					<image src="../../static/image/icon/财产业务.png" mode=""></image>
					<view class="">
						财产业务
					</view>
				</view>
			</view>
		</view>
		<view class="floor2">
			<view class="top">
				<image src="../../static/image/fujing.png" mode=""></image>
				<view class="">
					附近的律师
				</view>
				<view class="text" @tap="jumpLookLower">
					<view class="">
						MORE
					</view>
					<view class="right">
						>
					</view>
				</view>
			</view>
			<view class="lawer-box" @tap="jumpLawerIndex" v-for="item in 6" :key="item">
				<image src="../../static/image/banner.png" mode=""></image>
				<view class="box-right">
					<view class="top">
						<view class="name">
							李小龙律师
						</view>
						<view class="year">
							执业10年
						</view>
					</view>
					<view class="middle">
						<image src="../../static/image/map.png" mode=""></image>
						<view class="">
							广州市
						</view>
						<view class="" style="margin: 0 8rpx;">
							| 
						</view>
						<view class="">
							广东打拳律师事务所
						</view>
					</view>
					<view class="bottom">
						<image src="../../static/image/zan1.png" mode=""></image>
						<view class="lenged">
							债务纠纷(24)
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="floor3">
			<view class="top">
				<image src="../../static/image/ranking.png" mode=""></image>
				<view class="">
					用户评价
				</view>
				<view class="text">
					<view class="">
						
					</view>
					<view class="">
						
					</view>
				</view>
			</view>
			<view class="evaluate-box" v-for="item in 10" :key="item">
				<image src="../../static/image/fujing.png" mode=""></image>
				<view class="evaluate-right">
					<view class="evaluate-top">
						<view class="stars">
							<image src="../../static/image/star.png" mode="" v-for="item in 5" :key="item"></image>
						</view>
						<view class="give">
							评价给
							<text class="name">李小龙律师</text>
						</view>
					</view>
					<view class="content">
						谢谢你的建议
					</view>
					<view class="evaluate-bottom">
						<view class="bottom-name">
							A***双
						</view>
						<view class="bottom-time">
							2020-12-27
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList:[
					{img:"../../static/image/banner.png"}
				]
			}
		},
		methods: {
			jumpLawerIndex(){
				uni.navigateTo({
					url:"/pages/lawerIndex/lawerIndex?id=1"
				})
			},
			switchToConsult(){
				uni.switchTab({
					url:"/pages/consult/consult"
				})
			},
			jumpLookLower(){
				uni.switchTab({
					url:"/pages/lookLawer/lookLawer"
				})
			}
		},
		onPullDownRefresh(){
			uni.showLoading({
				title:"加载中..."
			})
			setTimeout(()=>{
				uni.hideLoading()
				uni.stopPullDownRefresh()
			},500)
			
		},
		onReachBottom(){
			uni.showLoading({
				title:"加载中..."
			})
			setTimeout(()=>{
				uni.hideLoading()
			},500)
		}
	}
</script>

<style lang="scss" scoped>
.banner{
	width: 100%;
}
.banner2{
	width: 100%;
	padding: 10rpx 20rpx;
	box-sizing: border-box;
	text-align: center;
	image{
		width: 100%;
	}
}
.top{
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	font-size: 30rpx;
	image{
		width: 32rpx;
		height: 32rpx;
		margin: 0 20rpx 0 0 ;
	}
	.text{
		display: flex;
		align-items: center;
		margin-left: auto;
		font-size: 20rpx;
		color: #007AFF;
		.right{
			line-height: 20rpx;
			display: flex;
			align-items: center;
			margin: -5rpx 0 0 10rpx;
		}
	}
}
.box{
	width: 100%;
	box-sizing: border-box;
	padding: 30rpx 10rpx;
	display: flex;
	flex-wrap: wrap;
	.sub-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		padding: 10rpx;
		font-size: 25rpx;
		width: 25%;
		image{
			width: 60rpx;
			height: 60rpx;
		}
	}
}
.lawer-box{
	border-bottom: .2rpx solid #ddd;
}
.floor3{
	margin: 30rpx 0 0 0;
	
}
.evaluate-box{
	border-bottom: .2rpx solid #eee;
}
</style>
